import 'package:dotted_border/dotted_border.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:mobile_scanner/mobile_scanner.dart';
import 'package:share_fit/app/components/back_btn_icon.dart';
import 'package:share_fit/app/controllers/device/scan/device_scan_logic.dart';
import 'package:share_fit/app/helper/ext/tr_ext.dart';
import 'package:share_fit/generated/locales.g.dart';

class DeviceScanPage extends StatelessWidget {
  DeviceScanPage({super.key});

  final logic = Get.put(DeviceScanLogic());
  final state = Get.find<DeviceScanLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:
            Text(LocaleKeys.qrcode_scan.ts, style: TextStyle(fontSize: 54.sp)),
        centerTitle: true,
        leading: BackBtnIcon(onTap: () => Get.back()),
      ),
      body: Padding(
        padding: EdgeInsets.only(top: 20.w, left: 42.w, right: 42.w),
        child: Container(
          alignment: Alignment.topCenter,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Text(
                LocaleKeys.qrcode_scan_des.ts,
                style: TextStyle(
                  fontSize: 48.sp,
                ),
              ),
              const SizedBox(height: 45),
              Text(
                LocaleKeys.qrcode_scan_tips.ts,
                style: TextStyle(
                  fontSize: 42.sp,
                  color: Colors.black,
                ),
              ),
              const SizedBox(height: 45),
              SizedBox(
                width: 742.w,
                height: 742.w,
                child: Stack(
                  children: [
                    DottedBorder(
                      color: Colors.black,
                      strokeWidth: 1,
                      child: GetBuilder<DeviceScanLogic>(
                          id: "camera_scan",
                          builder: (DeviceScanLogic controller) {
                            return MobileScanner(
                              // fit: BoxFit.contain,
                              controller: logic.cameraController,
                            );
                          }),
                    ),
                    GetBuilder<DeviceScanLogic>(
                        id: "capture_image",
                        builder: (DeviceScanLogic controller) {
                          if (!state.isConnecting || state.image == null) {
                            return Container();
                          } else {
                            return Container(
                              padding: EdgeInsets.all(10.w),
                              decoration:
                                  const BoxDecoration(color: Colors.white),
                              child: FittedBox(
                                fit: BoxFit.fill,
                                child: Image.memory(state.image!)
                              ),
                            );
                          }
                        }),
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}
